<script setup>

import {Setting} from "@element-plus/icons-vue";
import Card from "@/components/Card.vue";
import {reactive, ref} from "vue";
import {get, post} from "@/net";

const form = reactive({
  password: '',
  new_password: '',
  new_password_repeat: ''
})

const validatePassword = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('请输入新密码'));
  } else if (!/^[a-zA-Z0-9\u4e00-\u9fa5]+$/.test(value)) {
    callback(new Error('密码只能包含字母、数字和中文'));
  } else if (value !== form.new_password) {
    callback(new Error('两次输入的密码不一致'));
  } else {
    callback();
  }
}
const rules = {
  password: [
    {required: true, message: '请输入原密码', trigger: 'blur'},
    {min: 6, max: 16, message: '长度在 6 到 16 个字符', trigger: 'blur'}
  ],
  new_password: [
    {required: true, message: '请输入新密码', trigger: 'blur'},
    {min: 6, max: 16, message: '长度在 6 到 16 个字符', trigger: 'blur'}
  ],
  new_password_repeat: [
    {required: true, message: '请重新输入新密码', trigger: 'blur'},
    {validator: validatePassword, trigger: ['blur', 'change']},
  ]
}

const formRef = ref();
const valid = ref(false);
const onValidate = (prop, isValid) => valid.value = isValid;
const resetPassword = () => {
  formRef.value.validate(valid => {
    if (valid) {
      post('/api/user/change-password', form, (data) => {
        ElMessage.success('修改成功')
        console.log(data)
        formRef.value.resetFields()
      },() =>{
        ElMessage.error('修改失败')
      })
    }
  })
}
const privacy = reactive({
  phone: false,
  email: false,
  qq: false,
  wx: false,
  gender: false
})
const saving = ref(true)
get('api/user/privacy' ,data => {
  console.log(data)
  privacy.phone = data.phone
  privacy.email = data.email
  privacy.qq = data.qq
  privacy.wx = data.wx
  privacy.gender = data.gender
  saving.value = false
})
const savePrivacy = (type,status) => {
  post('api/user/save-privacy', {type, status}, () => {
    ElMessage.success('保存成功')
  },() => {
    ElMessage.error('保存失败')
    saving.value = false
  })
}
</script>

<template>
  <div style="margin: auto;max-width: 600px">
    <div style="margin-top: 20px">
      <card :icon="Setting" title="隐私设置" description="在这里,你可以进行设置哪些内容可以被他人看到" v-loading="saving">
        <div class="checkbox-list">
          <el-checkbox label="公开展示手机号" v-model="privacy.phone" @change="savePrivacy('phone',privacy.phone)"/>
          <el-checkbox label="公开展示电子邮件" v-model="privacy.email" @change="savePrivacy('email',privacy.email)"/>
          <el-checkbox label="公开展示微信" v-model="privacy.wx" @change="savePrivacy('wx',privacy.wx)"/>
          <el-checkbox label="公开展示QQ" v-model="privacy.qq" @change="savePrivacy('qq',privacy.qq)"/>
          <el-checkbox label="公开展示性别" v-model="privacy.gender" @change="savePrivacy('gender',privacy.gender)"/>
        </div>
      </card>
      <card :icon="Setting" title="修改密码" description="在这里，你可以修改的你的密码">
        <el-form :model="form" :rules="rules" ref="formRef" @validate="onValidate" label-width="100px"
                 style="margin:20px">
          <el-form-item label="原密码" prop="password">
            <el-input :prefix-icon="Lock" type="password" v-model="form.password" placeholder="请输入原密码"
                      maxlength="16"/>
          </el-form-item>
          <el-form-item label="新密码" prop='new_password'>
            <el-input :prefix-icon="Lock" type="password" v-model="form.new_password" placeholder="新密码"
                      maxlength="16"/>
          </el-form-item>
          <el-form-item label="重复新密码" prop="new_password_repeat">
            <el-input :prefix-icon="Lock" type="password" v-model="form.new_password_repeat" placeholder="重新输入密码"
                      maxlength="16"/>
          </el-form-item>
          <div style="text-align: center">
            <el-button type="success" @click="resetPassword()">修改密码</el-button>
          </div>
        </el-form>
      </card>
    </div>

  </div>
</template>

<style scoped>

.checkbox-list {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
}
</style>